/*
 * Copyright (c) 2007-2020 西安交通信息投资营运有限公司 版权所有
 * 作者:李蕊
 */

import React, {useCallback} from 'react';
import {Form, Input, InputNumber, Modal, Spin} from 'antd';
import {SysSeqModel} from '../data';
import EditModalFooter from "@/lib/EditModalFooter";
import styles from "@/utils/utils.less";
import service from "../service";
import {EditDialogProps} from "@/global";
import {FormInstance} from "antd/lib/form";
import useEditModalFooter from "@/hooks/useEditModalFooter";
import useLoad from "@/hooks/useLoad";
import useForm from "@/hooks/useForm";
import useSave from "@/hooks/useSave";
import {Store} from "rc-field-form/lib/interface";

const FormItem = Form.Item;
const TextArea = Input.TextArea;

/** 表单布局 */
const formLayout = {
  labelCol: {span: 7},
  wrapperCol: {span: 13},
};

/** 系统序列编辑表单组件 */
const Edit: React.FC<EditDialogProps> = props => {
  const {params: {created, newModel = {startWith: 1, incrementBy: 1,}, id, onSubmitSucess}, visible, hide} = props;
  const {form, bind, reset, submit} = useForm();
  const {loading: dataLoading, data: model} = useLoad<SysSeqModel>({
    isLoad: Boolean(id),
    isClear: false,
    defaultData: newModel,
    onLoad: () => service.selectById(id),
    onSuccess: bind,
  }, [id]);
  const {finishCallback, ...footerProps} = useEditModalFooter({created, reset, hide, onSubmitSucess});
  const {submitLoading, save} = useSave<SysSeqModel>({created, onSave: service.save,});

  const onFinish = useCallback((values: any) => {
    save(model, values, finishCallback);
  }, [model]);


  //新建时数据初始化
  // useMount(() => {
  //   created && bind({
  //     startWith: 1,
  //     incrementBy: 1,
  //   });
  // })

  // const editFormProps = {
  //   form,
  //   model,
  //   created: booleanToNumber(created),
  //
  // }

  return (
    <Modal
      title={created ? '新建系统序列' : '编辑系统序列'}
      visible={visible}
      width={700}
      destroyOnClose
      maskClosable={false}
      onCancel={hide}
      footer={(
        <EditModalFooter
          {...footerProps}
          okLoading={dataLoading || submitLoading}
          onOk={submit}
          onCancel={hide}/>
      )}
    >
      <Spin spinning={dataLoading || submitLoading} wrapperClassName={styles.h100p}>
        {model && (<EditForm {...{form, model, created, onFinish}}/>)}
      </Spin>
    </Modal>
  );
};

/** 表单组件  */
function EditForm(props: { created: boolean, model: SysSeqModel, form: FormInstance, onFinish: (values: Store) => void }) {
  const {model, form, onFinish} = props;
  return (
    <Form form={form} onFinish={onFinish} initialValues={model} {...formLayout}>
      {/*<FormItem*/}
      {/*  name="id"*/}
      {/*  label="序列主键"*/}
      {/*>*/}
      {/*  <Input maxLength={-1}/>*/}
      {/*</FormItem>*/}
      <FormItem
        name="name"
        label="序列名称"
        rules={[{required: true, message: '请输入序列名称'}]}
      >
        <Input maxLength={100}/>
      </FormItem>
      <FormItem
        name="code"
        label="序列编码"
        rules={[{required: true, message: '请输入序列编码'}]}
      >
        <Input maxLength={100}/>
      </FormItem>
      <FormItem
        name="startWith"
        label="开始值"
        rules={[{required: true, message: '请输入开始值'}]}
      >
        <InputNumber min={1} max={999999999} style={{width: '100%'}} maxLength={9}/>
      </FormItem>
      <FormItem
        name="currentValue"
        label="当前值"
        rules={[{required: true, message: '请输入当前值'}]}
      >
        <InputNumber min={1} max={999999999} style={{width: '100%'}} maxLength={9}/>
      </FormItem>
      <FormItem
        name="incrementBy"
        label="步长"
        rules={[{required: true, message: '请输入步长'}]}
      >

        <InputNumber min={1} max={100000} style={{width: '100%'}} maxLength={5}/>

      </FormItem>
      <FormItem
        name="remark"
        label="备注"
      >
        <TextArea rows={4} maxLength={500}/>
      </FormItem>
    </Form>
  );
}

export default React.memo(Edit);

